<extend name="Public:main" />

<block name="style">
<load href="https://cdn.bootcss.com/bootstrap-select/1.13.2/css/bootstrap-select.min.css" />
<style>
.main{
  background-color:#fafafa;
}
</style>
</block>

<block name="container">
<div class="form-inline">
	<div class="form-group">
		<label for="link">受访页面</label>
		<select id="link" class="selectpicker" multiple>
			<foreach name='link' item='link' >
				<option value="{$link.code_value}">{$link.code_note}</option>
			</foreach>
		</select>
	</div>
	<div class="form-group">
		<label for="date1">时间区间</label>
		<input type="text" id="date1" class="form-control input-sm" />
	</div>
	<div class="form-group">
		<label for="date2">至</label>
		<input type="text" id="date2" class="form-control input-sm" />
	</div>
	<div class="form-group">
		<select class="form-control input-sm" id="check">
			<option value="all" selected>显示全部</option>
			<option value="vis">网站访客</option>
			<option value="bot">网络蜘蛛</option>
		</select>
	</div>
	<div class="form-group">
		<button type="submit" class="btn btn-sm btn-success" id="search">查询</button>
		<a class="btn btn-sm btn-primary" href="__APP__/Vistor/chart">图表统计</a>
	</div>
</div>
<hr />
<div class="table-responsive">
	<table class="table table-hover table-condensed">
		<thead><th>编号</th><th>受访页面</th><th>IP</th><th>地区</th><th>ISP</th><th>操作系统</th><th>浏览器</th><th>时间</th></thead>
		<tbody id="tbody"></tbody>
	</table>
</div>
<div class="pages"></div>
</block>

<block name="script">
<load href="https://cdn.bootcss.com/bootstrap-select/1.13.2/js/bootstrap-select.min.js" />
<load href="https://cdn.bootcss.com/bootstrap-select/1.13.2/js/i18n/defaults-zh_CN.min.js" />

<script>
(function(){
	"use strict";

	var init = function(){
		initPage();
		bindEvent();
		loadTable();
	},
	initPage = function(){
		$(".selectpicker").selectpicker({
			noneSelectedText : '请选择',
			style : 'btn-default btn-sm',
			//liveSearch : true,
			actionsBox : true,
		});
		$(".bootstrap-select").find("input").addClass('input-sm');
		laydate.render({
			elem: '#date1',
			type: 'datetime',
			theme: 'wugn',
			calendar: true,
			today: true
		});
		laydate.render({
			elem: '#date2',
			type: 'datetime',
			theme: 'wugn',
			calendar: true,
			today: true
		});
	},
	bindEvent = function(){
		$("#search").click(function(){
			loadTable();
		});
		$(".pages").on("click", "a" ,function(){
			loadTable(this.href);
			return false;
		});		
		$(".pages").on("keydown", ".pageTurn input" ,function(e){
			if(e.keyCode == 13 || e.keyCode == 108){
				var url = this.getAttribute("data-url").replace(/%5BPAGE%5D/, this.value);
				loadTable(url);
			}
		});
	},
	loadTable = function(url){
		var link = $("#link").val()?$("#link").val().toString():"",
		date1 = $("#date1").val(),
		date2 = $("#date2").val(),
		check = $("#check").val(),
		url = url?url:'__APP__/Vistor/loadTable';
		
		$.ajax({
			url: url,
			data: {
				link: link,
				date1: date1,
				date2: date2,
				check: check
			},
			type: 'POST',
			cache: false,
			dataType: 'JSON',
			beforeSend: function(){
				ajaxLoading();
			},
			success: function(data){
				fillTable(data);
				swal.close();
			},
			error: function(){
				ajaxError();
			},
			complete: function(){}
		});
	},
	fillTable = function(data){
		$("#tbody").empty();
		$(".pages").html(data.pages);
		if(data.list.length == 0){
			$("#tbody").append("<h3>查询结果为空！</h3>");
		} else {
			var list = data.list;
			for(var i in list){
				$("#tbody").append
					("<tr><td><a data-toggle='popover' data-placement='right' data-trigger='hover' data-html='true' title='USER AGENT' data-content='" + list[i].ag + "'>" + list[i].id
					 + "</a></td><td>" + list[i].lk
					 + "</td><td>" + list[i].ip
					 + "</td><td>" + list[i].country
					 + "</td><td>" + (list[i]['area']?list[i]['area']:'XX')
					 + "</td><td>" + list[i].os
					 + "</td><td>" + list[i].br
					 + "</td><td>" + list[i].tm + "</td></tr>");
			}
		}
		$("[data-toggle='popover']").popover();
	},
	ajaxLoading = function(){
		swal({
			title: "获取数据中...", 
			imageUrl: "{$Think.config.WUGN.CDN}/img/ajax-loading.gif",
			allowOutsideClick: false,
			allowEscapeKey: false,
			showConfirmButton: false
		});
	},
	ajaxError = function(){
		swal({
			type: 'error',
			title: 'ajax 加载失败',
			allowOutsideClick: false,
			allowEnterKey: false,
			confirmButtonText: '确认',
			animation: false,
			customClass: 'animated wobble'
		});
	};

	$(function(){
		init();
	});
})();
</script>
</block>